<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/common/global.jsp"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>个人记帐</title>
    <link rel="stylesheet" type="text/css" href="${staticPath}/resources/css/reset.css"/>
    <link rel="stylesheet" type="text/css"
          href="${staticPath}/resources/jslib/bootstrap/css/bootstrap.css">
    <%@include file="/common/com.jsp"%>

    <style>
        .continer{

            width:500px;

            min-height:500px;

        }

    </style>

</head>

<body>

<div class="continer">

    <div style="width:200px;height:200px;" id="persistent_pic">
        <img src="${path}/upload/${pic}" width="200px;" height="200px;"/>


    </div><br/>
    <form method="post" action="${path}/user/upload" enctype="multipart/form-data">

       <input name="id" type="hidden" value="${sessionScope.user.id}"/>

                    <span id="imgContent" class="mylabel">
					</span><br>
            <a class="btn" href="javascript:void(0)" onclick="$('#img').click()">选择图片</a>


        <div style="opacity:0;">
            <input type="file" id="img" name="file" data-content="imgContent"/>
        </div>


        <input type="submit" value="提交"/>
    </form>

</div>
<script>





    window.onload=function(){

        //绑定图片事件
        $("#img").change(function(e) {
            $("#"+$(this).attr("data-content")).html('');
            for (var i = 0; i < this.files.length; i++) {
                $("#"+$(this).attr("data-content")).append('<img style="width:150px;height:150px;margin-left: 10px;" src="'+ getObjectURL(this.files[i])+'">');
            }
        });
    }
    function getObjectURL(file) {
        var url = null ;
        if (url!=null){
            $("#persistent_pic").hide();

        }
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        if (url!=null){
            $("#persistent_pic").hide();

        }
        return url ;
    }
</script>




</body>
</html>
